<template>
  <KView class="circle-log-item" @click="itemClick">
    <KView class="circle-log-item-avatar">
      <sys-avatar :url="log.headimgurl" shape="circle"></sys-avatar>
    </KView>
    <KView class="circle-log-item-content">
      <KView class="circle-log-item-content-name">{{log.name}}：</KView>
      <KView class="circle-log-item-content-text">
        <template v-if="log.replyUnionid!==null">
          <span>回复</span>
          <span class="circle-log-item-content-replyname">{{log.replyName}}：</span>
        </template>
        <wx-text v-if="isMiniprogram" class="circle-log-item-content-text-data" space="nbsp">{{log.content}}</wx-text>
        <span style="color:#999ba0;display:inline-block">{{log.timeDistance}}</span>
      </KView>
    </KView>
    <KView class="circle-log-item-praise-div" @click.stop>
      <KView class="circle-log-item-praise" @click.stop="praiseClick">
        <KView class="circle-log-item-praise-svg">
          <sys-svg name="heart2" :color="log.isPraise?'#fc3d3d':'#81848a'"></sys-svg>
        </KView>
        <KView class="circle-log-item-praise-count" :class="{'is_praise':log.isPraise}">{{log.praiseCount}}</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysAvatar from 'common/sysAvatar';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      log: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
      };
    },

    methods: {
      praiseClick() {
        this.$emit('to-praise', this.log);
      },

      itemClick() {
        this.$emit('item-click', this.log);
      }
    },

    components: {
      SysAvatar,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .circle-log-item {
    display: flex;

    .circle-log-item-avatar {
      width: formatPx(44);
      height: formatPx(44);
    }

    .circle-log-item-content {
      flex: 1;
      margin-left: formatPx(12);
      margin-right: formatPx(18);

      .circle-log-item-content-name {
        font-size: formatPx(24);
        color: #8f8f8f;
        margin-bottom: formatPx(4);
      }

      .circle-log-item-content-text {
        font-size: formatPx(26);
        line-height: formatPx(40);

        .circle-log-item-content-replyname {
          color: #999ba0;
        }

        .circle-log-item-content-text-data {
          margin-right: formatPx(30);
        }
      }
    }

    .circle-log-item-praise-div {
      width: formatPx(56);

      .circle-log-item-praise {
        width: 100%;
        height: formatPx(80);

        .circle-log-item-praise-svg {
          width: 100%;
          height: formatPx(40);
        }

        .circle-log-item-praise-count {
          text-align: center;
          font-size: formatPx(28);
          height: formatPx(40);
          line-height: formatPx(40);
          color: #81848a;

          &.is_praise {
            color: #fc3d3d;
          }
        }
      }
    }
  }

</style>
